<template>
  <v-container class="d-flex justify-center align-center" fluid>
    <v-card class="pa-6" elevation="3" max-width="400">
      <v-card-title class="justify-center">
        <span class="text-h5">登录</span>
      </v-card-title>
      <v-form ref="form" v-model="valid">
        <v-text-field
          v-model="email"
          label="邮箱"
          prepend-inner-icon="mdi-email"
          :rules="[rules.required, rules.email]"
          outlined
          dense
        ></v-text-field>
        <v-text-field
          v-model="password"
          label="密码"
          prepend-inner-icon="mdi-lock"
          :rules="[rules.required]"
          type="password"
          outlined
          dense
        ></v-text-field>
        <v-btn
          class="mt-4"
          color="primary"
          block
          :disabled="!valid"
          @click="submit"
        >
          登录
        </v-btn>
      </v-form>
      <v-card-actions class="justify-center mt-3">
        <small>还没有账户？<v-btn text="true" color="primary" @click="register">注册</v-btn></small>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import router from "@/router";

// 表单字段
const email = ref('');
const password = ref('');
const valid = ref(false);

// 表单验证规则
const rules = {
  required: (value: string) => !!value || '此字段为必填',
  email: (value: string) => /.+@.+\..+/.test(value) || '请输入有效的邮箱地址',
};

// 方法
const form = ref<any>(null);

const submit = () => {
  if (form.value.validate()) {
    console.log('登录成功:', email.value, password.value);
    // 在这里调用 API 提交登录请求
    router.push('/')
  }
};

const register = () => {
  console.log('跳转到注册页面');
  // 在这里处理注册页面跳转逻辑
};
</script>

<style lang="scss" scoped>
.v-container {
  height: 100vh;
  background: linear-gradient(to right, #2196f3, #21cbf3);
}
.v-card {
  border-radius: 12px;
  width: 600px;
}
</style>
